{% extends 'customer_dashboard.html' %}

{% block content %}
<div class="card">
  <h2><i class="bi bi-wallet2"></i> 余额查询</h2>
  <p>尊敬的客户 <strong>{{ session['user'] }}</strong>，您好！以下是您账户的余额信息：</p>

  <!-- 总余额 -->
  <div class="balance-summary" style="margin: 20px 0; padding: 15px; background-color: #e9f5ff; border-left: 5px solid #007bff;">
    <h3>💰 总余额：<span style="color: #007bff;">{{ "%.2f"|format(balance) }} 元</span></h3>
  </div>

  {% if cards %}
  <div class="card-container">
    {% for card in cards %}
    <div class="card-item" style="border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); padding: 20px; margin-bottom: 15px; background-color: #fdfdfd;">
      <h4 style="margin-bottom: 10px;"><i class="bi bi-credit-card-2-front"></i> 卡号：{{ card.cardID }}</h4>

      <p><i class="bi bi-cash-coin"></i> <strong>账户余额：</strong>{{ "%.2f"|format(card.balance) }} 元</p>
      <p><i class="bi bi-credit-card"></i> <strong>卡号：</strong>{{ card.cardID }}</p>
      <p><i class="bi bi-currency-exchange"></i> <strong>币种：</strong>{{ card.curID or '人民币 RMB' }}</p>
      <p><i class="bi bi-calendar-check"></i> <strong>开卡日期：</strong>{{ card.openDate or '未知' }}</p>
      <p><i class="bi bi-wallet2"></i> <strong>开卡金额：</strong>{{ "%.2f"|format(card.openMoney) }} 元</p>
      <p>
        <i class="bi bi-shield-check"></i> <strong>是否挂失：</strong>
        {% if card.IsReportLoss == '是' %}
          <span style="color: red;">是</span>
        {% else %}
          <span style="color: green;">否</span>
        {% endif %}
      </p>
      <p><i class="bi bi-clock-history"></i> <strong>最近交易时间：</strong>{{ card.lastTransactionTime or '暂无记录' }}</p>

      <!-- 操作按钮 -->
      <div style="margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap;">
        <a href="{{ url_for('customer.transactions') }}" class="btn btn-sm" style="background-color: #e0e0e0; color: #333;">查看交易记录</a>
        <a href="{{ url_for('customer.deposit') }}" class="btn btn-sm" style="background-color: #e0e0e0; color: #333;">去存款</a>
        <a href="{{ url_for('customer.withdraw') }}" class="btn btn-sm" style="background-color: #e0e0e0; color: #333;">去取款</a>
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p style="color: gray;">您暂时没有绑定任何银行卡。</p>
  {% endif %}

  <div style="margin-top: 30px; font-size: 13px; color: gray;">
    <i class="bi bi-info-circle"></i> 温馨提示：请妥善保管银行卡信息，注意账户安全。
  </div>
</div>
{% endblock %}
